<template>
	<view>
		<!--搜索框  -->
		<view class="cu-bar bg-white search fixed">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input type="text" placeholder="搜索景点" v-model="searchValue" confirm-type="search"></input>
			</view>
			<view class="action">
				<button class="cu-btn shadow-blur round" @click="search">搜索</button>
			</view>
		</view>
		<uni-calendar ref="calendar" :insert="false" @confirm="confirm" />
		
		<view class="image-parent">
			
			<!-- 视频默认背景 -->
			<view class="bg-video bg-mask flex align-center" style="height: 922upx;">
				<video v-if="foundInfo.movie":src="`${foundInfo.movie}`" autoplay loop muted :show-play-btn="false"
				 :controls="false" objectFit="cover"></video>
				<cover-view class="padding-xl text-white ">
					<cover-view class="padding-xs  text-xxl text-bold">
						{{foundInfo.scenicName}}
					</cover-view>
					<cover-view class="padding-xs">
						<cover-view class="lg text-gray" :class="'cuIcon-' + cuIcon[1].name">{{foundInfo.scenicAddress}}</cover-view>
					</cover-view>
					<cover-view class="padding-xs" style="color: gold;">
						来{{foundInfo.prov}}必来{{foundInfo.scenicName}}
					</cover-view>						
				</cover-view>
			</view>
			
			<view class="bg-img bg-mask flex align-center">
				<view class="padding-xl text-white">
					<view class="padding-xs text-lg">
						<text>{{foundInfo.scenicDescribe}}</text>
					</view>
				</view>
			</view>
			<image v-if="foundInfo.scenicImage" :src="`${backEndUrl}/img/show/${foundInfo.scenicImage}`" mode="aspectFill" class="image" style="width: 100%;"></image>
		    
			<image v-if="foundInfo.imageB" :src="`${backEndUrl}/img/show/${foundInfo.imageB}`" mode="aspectFill" class="image" style="width: 100%;"></image>
		    
			<view class="bg-img bg-mask flex align-center">
		    	<view class="padding-xl text-white">
		    		<view class="padding-xs text-lg">
		    			<text>{{foundInfo.scenicDescribe1}}</text>
		    		</view>
		    	</view>
		    </view>
			
			
			
			<view class="bg-video bg-mask flex align-center" style="height: 922upx;">
				<video v-if="foundInfo.movie":src="`${foundInfo.movie}`" autoplay loop muted :show-play-btn="false"
				 :controls="false" objectFit="cover"></video>
				<cover-view class="padding-xl text-white ">
					<cover-view class="padding-xs  text-xxl text-bold">
						风景优美，景色怡人
					</cover-view>
					<cover-view class="padding-xs">
						<cover-view class="lg text-gray" :class="'cuIcon-' + cuIcon[1].name">{{foundInfo.scenicAddress}}</cover-view>
					</cover-view>
					<cover-view class="padding-xs" style="color: gold;">
						
					</cover-view>						
				</cover-view>
			</view>
			
			
			
			<image v-if="foundInfo.imageB" :src="`${backEndUrl}/img/show/${foundInfo.imageB}`" mode="aspectFill" class="image" style="width: 100%;"></image>

		</view>
		<!-- 地图 -->
		<view>
			<view class="page-body">
				<view class="page-section page-section-gap">
					<map style="width: 100%; height: 300px;" :latitude="`${foundInfo.latitude}`"
						:longitude="`${foundInfo.longitude}`" :markers="covers">
					</map>
				</view>
			</view>
		</view>
		<!-- <button @click="refresh()">换一换</button> -->
		<button @click="toLineMore(foundInfo.id)">了解更多</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				backEndUrl: this.backEndUrl,
				foundInfo: {},
				searchValue: '',
				ColorList: this.ColorList,
				/**
				 * 图标
				 */
				CustomBar: this.CustomBar,
				cuIcon: [{
					name: 'appreciate',
					isShow: true
				},{
					name: 'location',
					isShow: true
				}],
				/**
				 * 淡色背景
				 */
				ColorList: this.ColorList,
			};
		},
		//上拉触底地  
		 
		// onReachBottom(){
		//       uni.reLaunch({
		//       	url: './found'
		//       });
		//     },
		 
		//下拉刷新
		    onPullDownRefresh() {
		      //重置一下数据
		      uni.reLaunch({
		      	url: './found'
		      });
		    },
		methods: {
			
			open() {
				this.$refs.calendar.open();
			},
			confirm(e) {
				console.log(e);
			},
			fetchFoundInfo() {
				this.$axios({
					method: 'get',
					url: '/index/foundInfo'

				}).then(res => {
					this.foundInfo = res.data;

				}).catch(err => {
					console.log(err)
				})
			},
			search() {
				console.log("========", this.searchValue)
				this.$axios({
					method: 'get',
					url: '/index/search',
					params: {scenicName: this.searchValue}
				}).then(res => {
					this.foundInfo = res.data;
				}).catch(err => {
					console.log(err)
				})
			},
			toLineMore(id){
				uni.navigateTo({
					url:'./linemore?id'+id
				});
			}
			
			
		},
		mounted() {
			this.fetchFoundInfo()
		}
	}
</script>

<style>
	page{
		padding: 0%;
		margin: 0%;
	}
.bg-img{
	background-image: url(http://182.61.20.194/pic/bg1.jfif);
	padding: 0%;
	margin: 0%;
}
.bg-img text{
	color: #a1afc9;
}
.image{
	padding: 0%;
	margin: 0%;
}

</style>
